[data-component='Session'] {
	position: relative;
	flex: 100 0 auto;
	width: 100%;
	overflow: hidden;

	TransitionAppear(1s);

	> video.local-video {
		position: absolute;
		z-index: 1000;
		left: 15px;
		top: 15px;
		width: 22%;
		object-fit: cover;
		transform: scaleX(-1);
		border: 1px solid rgba(#fff, 0.15);
		box-shadow: 0px 0px 15px 0px rgba(#000, 0.9);
		transition-property: opacity z-index;
		transition-duration: 0.5s;

		&.hidden {
			z-index: -1 !important;
			opacity: 0;
		}
	}

	> video.remote-video {
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition-property: opacity z-index;
		transition-duration: 0.25s;

		&.hidden {
			z-index: -1 !important;
			opacity: 0;
		}
	}

	> .no-remote-video-info {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #333;
		color: #888;
		font-size: 20px;
	}

	> .controls-container {
		position: absolute;
		z-index: 100;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;

		> .controls {
			width: auto;
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			background-color: rgba(#000, 0.5);
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;

			+desktop() {
				padding: 10px 30px;
			}

			+mobile() {
				padding: 5px 20px;
			}

			> .control {
				background-size: 100%;
				background-position: center;
				background-repeat: no-repeat;
				margin: 0 10px;
				transition: opacity 0.15s ease-in-out 0s !important;
				opacity: 0.6;

				+desktop() {
					height: 60px !important;
					width: 60px !important;
				}

				+mobile() {
					height: 40px !important;
					width: 40px !important;
				}

				&:hover {
					opacity: 0.9;
					cursor: pointer;
				}

				&.disabled {
					pointer-events: none;
					opacity: 0.25;
				}
			}
		}
	}
}
